<template>
	<view class="wrap">
		<view class="msg-list">
			<view class="msg-item u-flex">
				<image src="../../static/2.jpg" class="msg-head"></image>
				<view class="item-right u-flex u-flex-column u-flex-between">
					<view class="right-top u-flex u-flex-between">
						<view class="user-info">
							<text class="nickname">飞鸽相亲角</text>
							<text class="label">官方</text>
						</view>
						<view class="time">3-4 17:38</view>
					</view>
					<view class="right-bottom u-flex">
						<text class="msg-text">诚寻靠谱男结婚，非诚勿扰诚寻靠谱男结婚，非诚勿扰诚寻靠谱男结婚，非诚勿扰诚寻靠谱男结婚，非诚勿扰</text>
					</view>
				</view>
			</view>
			<view class="msg-item u-flex" v-for="item in 5"  @tap="goPage('/pages/msg/detail')">
				<image src="../../static/2.jpg" class="msg-head"></image>
				<view class="item-right u-flex u-flex-column u-flex-between">
					<view class="right-top u-flex u-flex-between">
						<view class="user-info">
							<text class="nickname">李女士</text>
							<image src="../../static/love/real.png" class="real-icon"></image>
						</view>
						<view class="time">3-4 17:38</view>
					</view>
					<view class="right-bottom u-flex u-flex-between">
						<text class="msg-text">诚寻靠谱男结婚，非诚勿扰诚寻靠谱男结婚，非诚勿扰诚寻靠谱男结婚，非诚勿扰诚寻靠谱男结婚，非诚勿扰</text>
						<u-icon name="trash" color="darkgray"></u-icon>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { orderDetail } from '@/api/uc/order.js';

export default {
	onShow() {
	},
	onLoad(options) {
		// options.id = 4;
		if(options.id != undefined) {
			this.order.id = options.id;
			this.init();
		}
	},
	data() {
		return {
			avatar: "https://cdn.uviewui.com/uview/album/1.jpg",
			src: "https://cdn.uviewui.com/uview/album/1.jpg",
			order: {
				id: 0,
				productList: []
			}
		}
	},
	methods: {
		init() {
			orderDetail(this.order.id).then(res=>{
				this.order = res.data.order;
			});
		}
	}	
}	
</script>

<style lang="less">
.wrap {}
	.msg-list{
		padding-left: 20upx;
		.msg-item{
			padding: 20upx 0;
			padding-bottom: 0;
			.msg-head{
				height: 100upx;
				width: 100upx;
				border-radius: 10upx;
				overflow: hidden;
				margin-right: 20upx;
				flex: none;
			}
			.item-right{
				height: 100upx;
				flex: 1;
				border-bottom: 1rpx solid #eee;
				padding-bottom: 20upx;
				padding-right: 20upx;
				.right-top{
					.user-info{
						.nickname{
							font-weight: bold;
							margin-right: 10upx;
						}
						.label{
							font-size:20upx;
							width: 40upx;
							height: 40upx;
							background: #03b904;
							color: #fff;
							border-radius: 10upx;
						}
						.real-icon{
							width: 80upx;
							height: 30upx;
						}
					}
					.time{
						font-size: 24upx;
						color: darkgray;
					}
				}
				.right-bottom{
					font-size: 26upx;
					color: #504e4e;
					flex: 1;
					align-items: flex-end;
					.msg-text{
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 1;
					}
				}
			}
		}
	}
</style>